<template>
	<view class="content">
		<!-- 750x55 -->
		<!-- 顶部搜索狂 -->
		<view class="search" @tap="search">
			<view class="search_box">
				<image src="../../static/搜索.png" mode="widthFix"></image>
				<input type="text" placeholder="请输入搜索关键词" disabled/>
			</view>
		</view>

		<!-- 轮播图 -->
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item class="banner-item" v-for="(item,index) in banner" :key="item.id">
				<image class="banner-image" :src="item.image_url" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 频道 -->
		<u-grid :border="true" col="5">
			<u-grid-item @tap="Tochannel(listIndex)" class="u-grid-item" v-for="(listItem,listIndex) in channel"
				:key="listIndex" bgColor="#fff" :size="28">
				<u-icon :customStyle="{paddingBottom:20+'rpx'}" :name="listItem.icon_url" :size="28" mode="widthFix">
				</u-icon>
				<text class="grid-text">{{listItem.name}}</text>
			</u-grid-item>
		</u-grid>

		<!-- 品牌 -->
		<view class="brand">
			<view class="title">品牌制造商直供</view>
			<view class="brand-list">
				<view class="brand-item" v-for="item in brandList" :key="item.id" @tap="brandClick(item.id)">
					<view class="brand-item-name">{{item.name}}</view>
					<view class="brand-item-price">{{item.floor_price |priceFormat}}</view>
					<image class="brand-item-image" :src="item.pic_url" mode="widthFix"></image>
				</view>
			</view>

		</view>

		<!-- 新品 -->
		<div class="newGoods">
			<view class="title">周一周四·新品首发</view>

			<customList :list="newGoodsList"></customList>
		</div>

		<!-- 人气推荐 -->
		<view class="hotGoods">
			<view class="title">
				人气推荐
			</view>
			<view class="hotGoods">
				<view class="hotGoods-item" v-for="item in hotGoodsList" :key="item.id">
					<view class="hotGoods-image">
						<image :src="item.list_pic_url" mode="widthFix"></image>
					</view>
					<view class="hotGoods-text">
						<view class="hotGoods-text-name">
							{{item.name}}
						</view>
						<view class="hotGoods-text-brief">
							{{item.goods_brief}}
						</view>
						<view class="hotGoods-text-price">
							{{item.retail_price | priceFormat }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 专题精选 -->
		<view class="topic">
			<view class="title">专题精选</view>
			<u-scroll-list :indicator=indicator>
				<view class="topic-item" v-for="(item, index) in topicList" :key="index">
					<image class="topic-image" :src="item.item_pic_url"></image>
					<view class="topic-Toptitle">
						<view class="topic-title">{{item.title}}</view>
						<view class="topic-price">{{item.price_info | priceFormat}}</view>
					</view>
					<view class="topic-Bottomtitle">
						{{item.subtitle}}
					</view>
				</view>
			</u-scroll-list>
		</view>

		<!-- 商品列表 -->
		<view class="goodlist" v-for="item in categoryList" :key="item.id">
			<view class="title">
				{{item.name }}
			</view>
			<customList :list="item.goodsList"></customList>
		</view>



		<!-- 底部tabbar栏 -->
		<customTabBar></customTabBar>
	</view>
</template>

<script>
	import customTabBar from '@/custom-tab-bar/index.vue';
	import {
		ApiGetHomeData
	} from "@/utils/api.js"
	import customList from '@/components/custom-list/custom-list.vue'
	export default {
		data() {
			return {
				indicator: false,
				banner: [],
				channel: [],
				brandList: [],
				newGoodsList: [],
				hotGoodsList: [],
				topicList: [],
				categoryList: [],
				indicator: true,
			};
		},
		onLoad() {
			this.getIndex()
		},
		methods: {
			async getIndex() {
				let res = await ApiGetHomeData();
				let {
					banner,
					channel,
					brandList,
					newGoodsList,
					hotGoodsList,
					topicList,
					categoryList

				} = res.data
				this.banner = banner
				this.channel = channel
				this.brandList = brandList
				this.newGoodsList = newGoodsList
				this.hotGoodsList = hotGoodsList
				this.topicList = topicList
				this.categoryList = categoryList

			},
// 搜索
			search(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			Tochannel(listIndex) {
				console.log("跳转到channel", listIndex);
				if (listIndex === 4) {
					listIndex = 8
				}
				if (listIndex === 2) {
					listIndex = 3
				}
				if (listIndex === 3) {
					listIndex = 2
				}
				this.$store.state.index = listIndex
				if (listIndex == 8) {
					listIndex = 4
				}
				if (listIndex === 3) {
					listIndex = 2
				}
				if (listIndex === 2) {
					listIndex = 3
				}
				this.$store.state.num = this.channel[listIndex].id
				uni.navigateTo({
					url: `/pages/channel/channel?id=${this.channel[listIndex].id}`,
				})
			},
			//品牌跳转详情
			brandClick(id) {
				uni.navigateTo({
					url: `/pages/brand/brand?id=${id}`
				})
			},
			
		},
		
		components: {
			customTabBar,
			customList
		},
		computed: {

		},
		onShow() {
			this.$store.commit('changeTabBarIndex', 0);
		},
	


	};
</script>

<style lang="scss">
	.content {
		background-color: #efefef;
		padding-bottom: 100px;
	}

	// 搜索框
	.search {
		height: 110rpx;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		background-color: #fff;

		margin: 0 auto;

		.search_box {
			width: 700rpx;
			height: 70rpx;
			background-color: #f7f8fa;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 25rpx;
			box-sizing: border-box;

			image {
				width: 50rpx;
			}

			input {
				font-size: 25rpx;

			}
		}
	}

	// 宫格
	.u-grid {
		height: 172rpx;
		margin-bottom: 40rpx;

		.u-grid-item {
			height: 172rpx;

			.grid-text {
				font-size: 21rpx;
				margin-top: 16rpx;
				color: #646566;
			}
		}
	}

	// 轮播图
	.banner {
		width: 750rpx;


		.banner-item {
			width: 750rpx;

			.banner-image {
				width: 750rpx;
			}
		}
	}

	// 标题
	.title {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 37rpx;
		background-color: #fff;
	}

	// 品牌
	.brand {
		width: 750rpx;
		background-color: #fff;
		margin-bottom: 40rpx;
		padding-bottom: 4rpx;

		.brand-list {

			width: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 236rpx 236rpx;
			grid-column-gap: 14rpx;
			grid-row-gap: 4rpx;

			.brand-item {
				position: relative;

				.brand-item-name {
					position: absolute;
					z-index: 1;
					top: 20rpx;
					left: 21rpx;
					font-size: 28rpx;
				}

				.brand-item-price {
					position: absolute;
					z-index: 1;
					top: 84rpx;
					left: 21rpx;
					font-size: 24rpx;
				}

				.brand-item-image {
					width: 100%;

				}
			}
		}
	}

	// 新品
	.newGoods {
		background-color: #fff;
		margin-bottom: 20rpx
	}

	// 人气推荐
	.hotGoods {
		background-color: #fff;
		margin-bottom: 40rpx;

		.hotGoods-item {
			display: flex;
			background-color: #fafafa;
			margin-bottom: 15rpx;

			.hotGoods-image {
				width: 228rpx;

				image {
					width: 90%;
				}
			}

			.hotGoods-text {
				flex: 1;

				.hotGoods-text-name {
					font-size: 34rpx;
					height: 34rpx;
					margin-top: 26rpx;
				}

				.hotGoods-text-brief {
					font-size: 24rpx;
					height: 24rpx;
					margin-top: 42rpx;
				}

				.hotGoods-text-price {
					font-size: 20rpx;
					height: 20rpx;
					margin-top: 39rpx;
				}
			}
		}
	}

	// 专题精选
	.topic {
		background-color: #fff;
		padding-left: 16rpx;




		.topic-image {
			width: 600rpx;
			height: 400rpx;
			margin-right: 30rpx;

			image {
				width: 100%;
			}
		}

		.topic-Toptitle {

			display: flex;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 30rpx;
			margin-top: 30rpx;
		}

		.topic-Bottomtitle {

			margin-top: 25rpx;
			font-size: 26rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

	}

	.goodlist {
		background-color: #fff;
	}
</style>
